<template>
	<view class="mine">
		<view @click="toLogin" class="userArea notLogin jc-start ai-center" v-if="!isLogin">
			<view class="avatar"></view>
			<view>立即登录</view>
			<u-icon name="arrow-right"></u-icon>
		</view>
		<view @click="ToUserInfo" class="userArea haveLogin jc-start ai-center" v-if="isLogin">
			<view :style="{backgroundImage: 'url('+userDetail.profile.avatarUrl+')'}" class="avatar"></view>
			<view class="userInfo jc-evenly ai-start">
				<view class="nickname">{{userDetail.profile.nickname}}</view>
				<view class="level">Lv.{{userDetail.level}}</view>
			</view>
			<u-icon style="position: absolute;right: 8px;" name="arrow-right"></u-icon>
		</view>
		<view class="iconMenu jc-between">
			<view v-for="(item,index) in iconMenu" :key="index" :style="{marginBottom: index<iconMenu.length-iconMenu.length%4?'16px':'0'}"
			 class="menuItem jc-between ai-center">
				<view :style="{backgroundImage: 'url(/static/mine/'+item.icon+'.png)'}"></view>
				<view>{{item.title}}</view>
			</view>
			<view v-for="(item1) in (4 - iconMenu.length%4)" :key="item1+99" style="visibility: hidden;" class="menuItem jc-between ai-center">
				<view></view>
				<view></view>
			</view>
		</view>

		<view class="myLike commonBlock">
			<sheetItem name="我喜欢的音乐" coverImgUrl="/static/mine/likeSheet.png" trackCount="109" />
		</view>

		<view class="sheets commonBlock">
			<view class="sheetTitle jc-between">
				<view>
					创建歌单({{createdList.length}}个)
				</view>
				<view>
					<u-icon name="plus"></u-icon>
					<u-icon class="moreDot" name="more-dot-fill"></u-icon>
				</view>
			</view>
			<view v-for="(item,index) in createdList" :key="index" class="sheetItem jc-between ai-center">
				<sheetItem :name="item.name" style="max-width: 79vw;" :coverImgUrl="item.coverImgUrl" :trackCount="item.trackCount" />
				<u-icon class="moreDot" name="more-dot-fill"></u-icon>
			</view>
		</view>

		<view class="sheets commonBlock">
			<view class="sheetTitle jc-between">
				<view>
					收藏歌单({{collectedList.length}}个)
				</view>
				<view>
					<u-icon name="plus"></u-icon>
					<u-icon class="moreDot" name="more-dot-fill"></u-icon>
				</view>
			</view>
			<view v-for="(item,index) in collectedList" :key="index" class="sheetItem jc-between ai-center">
				<sheetItem :name="item.name" style="max-width: 79vw;" :coverImgUrl="item.coverImgUrl" :trackCount="item.trackCount" />
				<u-icon class="moreDot" name="more-dot-fill"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getLoginStatus,
		logout,
		getUserDetail,
		getUserPlaylist
	} from '@/api/account.js'
	export default {
		data() {
			return {
				isLogin: true,
				userDetail: {
					profile: {}
				},
				notLogin: '../../static/mine/notLogin.png',
				basicMenus: [],
				iconMenu: [{
						icon: 'cloudDisk',
						title: '云盘'
					},
					{
						icon: 'recent',
						title: '最近播放'
					},
					{
						icon: 'focus',
						title: '我的关注'
					},
					{
						icon: 'collection',
						title: '收藏和赞'
					},
					{
						icon: 'radio',
						title: '我的电台'
					},
				],
				createdList: [],
				collectedList: []
			};
		},
		created() {
			this.getUser()

			getLoginStatus().then(async res => {
				const uid = res.profile.userId
				let playList = (await getUserPlaylist({
					uid
				})).playlist
				playList.forEach((item, index) => {
					if (item.userId == uid) {
						this.createdList.push(item)
					} else {
						this.collectedList.push(item)
					}
				})
			})


		},
		methods: {
			getUser() {
				this.checkLogin().then(res => {
					getUserDetail({
						uid: res.profile.userId
					}).then(res1 => {
						this.userDetail = res1
						this.isLogin = true
						this.$emit('recUserDetail', res1)
					})
				})
			},
			ToUserInfo() {
				uni.navigateTo({
					url: '/pages/main/userInfo'
				})
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			handleToLogin() {
				uni.navigateTo({
					url: "/pages/login/index"
				})
			},
			checkLogin() {
				return new Promise((resolve, reject) => {
					getLoginStatus().then(res => {
						if (res.code == 200) {
							resolve(res)
						}
					}).catch(err => {
						if (err.code == 301) {
							this.isLogin = false
							reject()
						}
					})
				})

			}
		}
	};
</script>

<style lang="scss" scoped>
	.mine {
		padding: 0 12px;

		.userArea {
			height: 24vw;
			padding: 16px 10px;
			position: relative;

			.avatar {
				@include roundness(48);
				@include bgRepeate('/static/mine/notLogin.png');
				margin-right: 14px;
			}

			>view:nth-child(2) {
				margin-right: 6px;
			}
		}

		.haveLogin {
			.avatar {
				// @include bgRepeate('/static/mine/avatar.jpg');
				@include bgRepeate('/static/mine/notLogin.png');
			}

			.userInfo {
				flex-direction: column;
				color: #000;
				height: 100%;
				padding: 4px 0;

				.nickname {
					font-size: 15px;
				}

				.level {
					font-style: italic;
					font-size: 13px;
					background-color: #fff;
					padding: 0 12px 0 9px;
					height: 15px;
					line-height: 15px;
					border-radius: 9px;
				}
			}
		}

		.commonBlock {
			background-color: #fff;
			border-radius: 10px;
		}

		.iconMenu {
			padding: 12px;
			flex-wrap: wrap;
			@extend .commonBlock;

			.menuItem {
				width: 22%;
				height: 58px;
				flex-direction: column;

				>view:first-child {
					@include bgRepeate('/static/mine/cloudDisk.png');
					@include roundness(36);
				}
			}
		}

		.myLike {
			padding: 12px;
			margin: 12px 0;
		}

		.sheets {
			padding: 12px;
			margin-bottom: 12px;

			.sheetTitle {
				color: #C0C0C0;
				margin-bottom: 12px;
			}

			.moreDot {
				transform: rotate(90deg);
				margin-left: 16px;
				color: #C0C0C0;
			}

			.sheetItem {
				margin-bottom: 8px;
				overflow: hidden;
			}
		}
	}
</style>
